<template>
  <div class="app-container place">
    <el-card class="margin-top-15">
      <el-descriptions title="基本信息" :column="3" border>
        <el-descriptions-item label="场所名称">
          {{ detailsInfo.placeName }}
        </el-descriptions-item>
        <el-descriptions-item label="场所地址">
          {{ detailsInfo.address }}
        </el-descriptions-item>
        <el-descriptions-item label="管辖派出所" >
          {{ detailsInfo.jurisdictions }}
        </el-descriptions-item>
        <el-descriptions-item label="经营者">
          {{ detailsInfo.ownerName }}
        </el-descriptions-item>
        <el-descriptions-item label="信用代码">
          {{ detailsInfo.certNumber }}
        </el-descriptions-item>
        <el-descriptions-item label="经营者联系方式">
          {{ detailsInfo.phone }}
        </el-descriptions-item>
        <el-descriptions-item label="经营状态">
          {{ detailsInfo.status == '2' ? '正常' : '不正常' }}
        </el-descriptions-item>
        <el-descriptions-item label="挂牌状态">
          <span style="color: #409EFF">蓝:{{detailsInfo.blue }} </span>
          <span style="color: #E6A23C">黄:{{detailsInfo.yellow }} </span>
          <span style="color: #F56C6C">红:{{detailsInfo.red }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="积分">
          {{ detailsInfo.score }}
        </el-descriptions-item>
        <el-descriptions-item label="星级">
          {{ detailsInfo.stars }}
        </el-descriptions-item>
        <!-- <el-descriptions-item label="附件">
          <img class="cus-avator" v-for="item in detailsInfo.fileList" :key="item.id" :src="item.url" alt="" srcset="">
        </el-descriptions-item> -->
      </el-descriptions>
    </el-card>
    <el-card class="margin-top-15">
      <el-descriptions title="房间信息" :column="3" border></el-descriptions>
      <el-table v-loading="loading" :data="roomList">
        <!-- <el-table-column label="房源码" align="center" prop="houseCode" /> -->
        <!-- <el-table-column label="房源类型;0 网约房 1 民宿" align="center" prop="houseType" /> -->
        <el-table-column label="房源名称" align="center" prop="roomName" />
        <!-- <el-table-column label="场所编号" align="center" prop="placeCode" /> -->
        <el-table-column label="场所名称" align="center" prop="placeName" />
        <el-table-column label="经营状态" align="center" prop="status">
          <template slot-scope="scope">
          <div>
            {{ scope.row.status == '2' ? '正常' : '不正常' }}
          </div>
        </template>
        </el-table-column>
        <!-- <el-table-column label="挂牌状态" align="center" prop="cardstatus">
          <template slot-scope="scope">
            <div>
              {{ scope.row.cardstatus | filterGpqk }}
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="创建人" align="center" prop="createdBy" /> -->
        <!-- <el-table-column label="创建时间" align="center" prop="createdTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              @click="addXjjl(scope.row)"
            >新增巡检</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="houseDetail(scope.row)"
              v-hasPermi="['ptsj:info:edit']"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="roomQueryParams.pageNum"
        :limit.sync="roomQueryParams.pageSize"
        @pagination="getRoomList"
      />
    </el-card>


    <el-card class="margin-top-15">
      <el-descriptions title="巡检记录" :column="3" border></el-descriptions>
      <el-table v-loading="loading" :data="inspectionList">
        <el-table-column label="房源名称" align="center" prop="roomName" />
        <el-table-column label="房间问题" align="center" prop="roomProblem" />
        <!-- <el-table-column label="场所编号" align="center" prop="placeCode" /> -->
        <el-table-column label="挂牌类型" align="center" prop="cardType" />
        <el-table-column label="加扣分" align="center" prop="score"/>
        <el-table-column label="巡检部门" align="center" prop="department">
        </el-table-column>
        <el-table-column label="巡检时间" align="center" prop="inspectionTime">
        </el-table-column>
        <!-- <el-table-column label="创建人" align="center" prop="createdBy" /> -->
        <!-- <el-table-column label="创建时间" align="center" prop="createdTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="seeXjjlDetails(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="inpQueryParams.pageNum"
        :limit.sync="inpQueryParams.pageSize"
        @pagination="getInspectionList"
      />
    </el-card>





<!-- 
    <el-card class="margin-top-15">
      <el-descriptions style="margin-top: 15px;" class="margin-top" title="流程展示" :column="3" border></el-descriptions>
      <el-timeline>
        <el-timeline-item hide-timestamp placement="top" v-for="(item, index) in detailsInfo.eventLogList" :key="index">
          <template slot="dot">
            <div class="procDept">{{item.procDept.substring(0, 2)}}</div>
          </template>
          <div class="content-info">
            <div class="procXm">{{ item.procXm}}</div>
            <div class="processOptions">{{ item.procMethed }}: {{ item.procOpinions}}</div>
            <div class="processTime">{{ item.processTime}}</div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card> -->
  </div>
</template>

<script>
import { getPlace } from '@/api/ptsj/place';
import { listInfo } from '@/api/ptsj/info';
import { listInspection } from "@/api/ptsj/inspection";
import { mapState } from 'vuex';
export default {
  // name: 'eventDetails',
  dicts: ['ptsj_dept_list'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 房源信息表格数据
      roomList:[],
      detailsInfo: {},
      // 场所相关房屋的查询参数
      roomQueryParams: {
        pageNum: 1,
        pageSize: 10,
        placeCode: null,
      },

      // 场所相关巡检记录
      inspectionList:[],
      // 巡检记录相关查询参数
      inpQueryParams: {
        pageNum: 1,
        pageSize: 10,
        placeCode: null,
      },

      formParams: {
        procOpinions: '',
        procMethed: '',
        jsdwmc: ''
      },
      rules: {
        procOpinions: [
          { required: true, message: '请输入处理意见', trigger: 'blur' },
        ],
        procMethed: [
          { required: true, message: '请选择处理方式', trigger: 'change' }
        ],
        jsdwmc: [
          { type: 'jsdwmc', required: true, message: '请选择接收单位', trigger: 'change' }
        ]
      },
      clfsList: [],
      clbmList: ['公安', '消防'],
      id: ''
    }
  },
  filters: {
    filterGpqk(val) {
      if(val == '1') {
        return '蓝牌'
      } else if(val == '2') {
        return '黄牌'
      } else if(val == '3') {
        return '红牌'
      } else {
        return '无挂牌'
      }
    }
  },
  computed: {
    ...mapState(['user']),
    deptName() {
      let { deptName } = this.user;
      return deptName
    }
  },
  created() {
    console.log('sss'+this.$route.query.placeCode)
    if(this.$route.query.placeCode) {
      // this.placeCode = this.$route.query.placeCode;
      this.roomQueryParams.placeCode = this.$route.query.placeCode;
      this.inpQueryParams.placeCode = this.$route.query.placeCode;
      this.getPlace();
      this.getRoomList();
      this.getInspectionList();
    }
    if(this.deptName == '协会') {
      this.clfsList = ['直接答复（含简易办理）', '受理告知（其他法定途径）', '转送']
    } else {
      this.clfsList = ['直接答复（含简易办理）', '受理告知（其他法定途径）', '退回']
    }
  },
  methods: {
    // 新增巡检记录
    addXjjl(row) {
      // this.$router.push('/add/inspection-add?houseCode=' + row.houseCode + '&placeCode=' + row.placeCode)
      // this.$router.push('/inspection/add?houseCode=' + row.houseCode + '&placeCode=' + row.placeCode)
      this.$router.push('/place/addInspection?houseCode=' + row.houseCode + '&placeCode=' + row.placeCode)
    },
    /* 查看巡检详情 */
    seeXjjlDetails(row) {
      this.$router.push({path: '/place/inspectionDetail', query: { id: row.id }});
    },
    async getPlace() {
      await getPlace(this.$route.query.placeCode).then(res => {
        try {
          // console.log(res)
          if(res.code == 200) {
            this.detailsInfo = res.data;
          }
        } catch {}
      })
    },

    // 获取房间列表
    async getRoomList(){
      await listInfo(this.roomQueryParams).then(response=>{
        try{
          this.roomList = response.rows;
          this.total = response.total;
          this.loading = false;
          console.log(response.rows)
        }catch {}
      })
    },
      // 获取场所巡检列表
      async getInspectionList(){
      await listInspection(this.inpQueryParams).then(response=>{
        try{
          this.inspectionList = response.rows;
          this.total = response.total;
          this.loading = false;
          console.log(response.rows)
        }catch {}
      })
    },

    // 跳转房源详情
    houseDetail(row){
      this.$router.push({path: '/place/roomDetail', query: { houseCode: row.houseCode,placeCode: row.placeCode}});
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.margin-top-15 {
  margin-top: 15px;
  margin-bottom: 50px;
}
.cus-avator {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-right: 8px;
  border-radius: 4px;
}
.procDept {
  position: relative;
  left: -14px;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: #fff;
  background-color: rgb(81, 175, 238);
  padding: 3px;
  box-sizing: border-box;
  line-height: 33px;
}
.content-info {
  margin-left: 5px;
  padding-top: 2px;
  .procXm {
    font-size: 18px;
    font-weight: 500;
  }
  .processOptions {
    background-color: rgb(247, 247, 247);
    color: rgb(95, 98, 102);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    width: fit-content;
    margin-top: 5px;
  }
  .processTime {
    font-size: 12px;
    text-align: left;
    margin-top: 5px;
  }
}
</style>

<style scoped>
.place >>> .el-descriptions__title {
  font-weight: normal;
  border-left: 4px solid rgb(110, 172, 238);
  padding-left: 15px;
}
</style>